<template>
	<view class="header-search">
		<!-- 图标 -->
		<image src="../../static/images/icon-search.png" class="search-icon"></image>
		<!-- 输入框 -->
		<input type="text" class="header-search-ipt" :placeholder="placeholder" :style="{width: iptWidth}">
	</view>
</template>

<script>
	export default {
		name: "my-search",
		data() {
			return {

			};
		},
		props: {
			placeholder: {
				type: String,
				default: '请输入协会名称'
			},
			// 文本框宽度
			iptWidth: {
				type: String,
				default: '100%',
			}
		}
	}
</script>

<style lang="scss">
	// 输入框区域
	.header-search {
		position: relative;

		// 搜索图标
		.search-icon {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 50%;
			left: 26rpx;
			transform: translateY(-50%);
		}

		// 输入框
		.header-search-ipt {
			height: 60rpx;
			background-color: #fff;
			border-radius: 50rpx;
			padding-left: 83rpx;
			font-size: 24rpx;
		}
	}
</style>
